<!-- 证书获取 -->
<template>
  <el-dialog title="证书获取" :visible.sync="dialogVisible" width="900px" append-to-body custom-class="edit-dialog" @close="handleClose">
    <div class="certDialogBox">
      <div class="certDialogTop">
        <img src="../../assets/images/icon-cert.png" style="width: 16px; height: 16px;" />
        <div class="certTips">
          <p>1、恭喜完成该专題培训,请先认真填写证书邮寄地址,因填写错误导致收不到证书概不负贵哦;</p>
          <p>2、请扫描付款二维码,支付邮寄运费;</p>
          <p>3、邮费支付成功后,请耐心等待工作人员审核,并请静候佳音;</p>
        </div>
      </div>
      <div class="payFlex">
        <div class="payBox">
          <p>付款二维码</p>
          <img src="../../assets/images/pay.png" style="width: 150px;" />
        </div>
        <div class="payForm">
          <el-form ref="elForm" :model="dataForm" size="small" label-width="140px" label-position="right">
            <el-col :span="24">
              <el-form-item label="地址收件人姓名" prop="recipientUserName" required>
                <el-input :readonly="isDisabled" v-model="dataForm.recipientUserName" placeholder="请输入" clearable :style='{"width":"100%"}'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收件人电话" prop="recipientUserPhone" required>
                <el-input :readonly="isDisabled" v-model="dataForm.recipientUserPhone" placeholder="请输入" clearable :style='{"width":"100%"}'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" >
              <el-form-item label="邮寄地址" prop="recipientUserAdress" required>
                <el-input :readonly="isDisabled" v-model="dataForm.recipientUserAdress" placeholder="请输入" clearable :style='{"width":"100%"}'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="证书获取人姓名" prop="certUserName" required>
                <el-input :readonly="isDisabled" v-model="dataForm.certUserName" placeholder="请输入" clearable :style='{"width":"100%"}'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="证书获取单位名称" prop="certBy" required>
                <el-input :readonly="isDisabled" v-model="dataForm.certBy" placeholder="请输入" clearable :style='{"width":"100%"}'></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item label="状态" prop="enabledMark" >
                <p>{{ dataForm.enabledMark | dynamicText(enabledMarkOptions) }} </p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属专题" prop="resourceId" >
                <p>{{ dataForm.resourceId | dynamicText(resourceIdOptions) }} </p>
              </el-form-item>
            </el-col> -->
          </el-form>
        </div>
      </div>
      <div class="tr">
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="dataFormSubmit()" :loading="isLoading" :disabled="isDisabled">已填写已付款</el-button>
        </span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { temsCertUserSimple, certRecordInfo } from "@/api/exam";
export default {
  name: 'CertObtainDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    resourceId: {
      type: String,
      default: ''
    },
    resourceName: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      dialogVisible: false,
      showEditDialog: false,
      isLoading: false,
      isDisabled: false,
      dataForm: {
        id: '',
        resourceId: '',
        resourceName: '',
        recipientUserName: '',
        recipientUserPhone: '',
        recipientUserAdress: '',
        certUserName: '',
        certBy: '',
        enabledMark: 0,  // 新添加
        lastModifyUserId: '',
        lastModifyTime: ''
      },
      rules: {
        recipientUserName: [
          {
            required: true,
            message: "请输入邮件地址收件人姓名",
            trigger: "blur",
          },
        ],
        recipientUserPhone: [
          {
            required: true,
            message: "请输入收件人电话",
            trigger: "blur",
          },
        ],
        recipientUserAdress: [
          {
            required: true,
            message: "请输入邮寄地址",
            trigger: "blur",
          },
        ],
        certUserName: [
          {
            required: true,
            message: "请输入证书获取人姓名",
            trigger: "blur",
          },
        ],
        certBy: [
          {
            required: true,
            message: "请输入证书获取单位名称",
            trigger: "blur",
          },
        ]
      },
    }
  },
  computed: {
    // 新增计算属性检查所有必填字段是否已填写
    allRequiredFieldsFilled() {
      return (
        this.dataForm.recipientUserName &&
        this.dataForm.recipientUserPhone &&
        this.dataForm.recipientUserAdress &&
        this.dataForm.certUserName &&
        this.dataForm.certBy
      );
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val;
        this.dataForm.resourceId = this.resourceId;
        this.dataForm.resourceName = this.resourceName;
        // 加载之前的记录
        if (this.dialogVisible) {
          this.loadCertInfo();
        } else {
          //还原数据
          this.isLoading = false;
          this.isDisabled = false;
          this.dataForm = {
            id: '',
            resourceId: '',
            resourceName: '',
            recipientUserName: '',
            recipientUserPhone: '',
            recipientUserAdress: '',
            certUserName: '',
            certBy: '',
            enabledMark: 0,  // 新添加
            lastModifyUserId: '',
            lastModifyTime: ''
          };
        }
      },
      immediate: true
    },
    dialogVisible(val) {
      if (!val) {
        this.$emit('update:visible', false);
      }
    },
    // dataForm: {
    //   handler(newVal) {
    //     this.isDisabled = !this.allRequiredFieldsFilled;
    //   },
    //   deep: true
    // }
  },
  methods: {
    loadCertInfo() {
      certRecordInfo(this.resourceId).then(res => {
        if (res.code == 200 && res.data) {
          this.dataForm = res.data;
          this.isDisabled = true;
        }
      })
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
    // 表单提交  
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.isLoading = true;
          let data = this.dataForm;
          temsCertUserSimple(data).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              setTimeout(() => {
                this.isLoading = false;
                this.handleClose();
              },500)
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.certDialogBox {
  padding: 0 20px;
}
.certDialogTop {
  padding: 20px 30px;
  background-color: #fffbe8;
  font-size: 13px;
  display: flex;
  margin-bottom: 20px;
}
.certTips {
  color: #f1974c;
    margin-left: 10px;
    margin-top: 2px;
}
.certTips > p {
  margin-bottom: 6px;
}
.certTips>p:nth-last-child(1) {
  margin-bottom: 0;
}
.payFlex {
  display: flex;
}
.payBox {
  width: 35%;
  text-align: center;
  border-right: 1px solid #ededed;
}
.payForm {
  width: 65%;
  padding-left: 30px;
  box-sizing: border-box;
}
.payBox > p {
  font-size: 15px;
  color: #333;
  text-align: left;
  margin-bottom: 40px;
}
.tr{
  text-align: right;
}
.el-dialog {
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #E2E7F5;
    
    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #393939;
    }
  }

  .el-dialog__body {
    padding: 24px;
  }
}


</style> 